import React, { Component } from "react";
import { connect } from "dva";
import { Button } from "antd";
import Table from "components/TableWrapper";
import { getTemplateList } from "../services/index";
import Columns from "./LogColumns";
import Details from "../logdetails";
import SearchForm from "./Search";
import styles from "./LogManagemetList.less";

class LogManagemetList extends Component {
  state = {
    visible: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: "appListMenu/getTenantList" });
  }

  componentWillUnmount() {
    this.updateQuery({});
  }

  updateQuery = (query) => {
    const { dispatch } = this.props;
    dispatch({
      type: "log/save",
      payload: {
        query,
      },
    });
  };

  // 操作-详情 打开详情页面
  handleDetail = ({ id }) => {
    this.setState({ visible: true, id });
  };

  handleVisible = (v) => {
    this.setState({ visible: v });
  };

  reload = () => {
    this.tableRef.fetch();
  };

  handleReset = () => {
    this.formRef.resetFields();
    this.updateQuery({});
    this.reload();
  };

  handleSumbit = (query) => {
    this.updateQuery(query);
  };

  render() {
    const columns = Columns(this.handleDetail);

    const { query, tenantList, dispatch, loading } = this.props;
    const { visible, id } = this.state;

    const getLoading = loading.effects["log/detail"] || false;

    const Buttonwrap = (
      <div>
        <Button
          type="primary"
          onClick={this.handleSumbit}
          style={{ marginRight: "8px" }}
        >
          查询
        </Button>
        <Button onClick={this.handleReset}>重置</Button>
      </div>
    );

    return (
      <div className={styles.root}>
        <div className={styles.listform}>
          <div className={styles.search}>
            <SearchForm
              onRef={(f) => {
                this.formRef = f;
              }}
              Buttonwrap={Buttonwrap}
              tenantList={tenantList}
            />
          </div>
        </div>
        <div className={styles.content}>
          <Table
            rowKey="id"
            onRef={(r) => {
              this.tableRef = r;
            }}
            api={getTemplateList}
            columns={columns}
            query={{
              ...query,
              // order: query.order || "desc",
              // sort: query.sort || "gmt_modified",
            }}
            reOrder
          />
        </div>
        {visible && (
          <Details
            visible={visible}
            toggleVisibie={(v) => this.handleVisible(v)}
            id={id}
            dispatch={dispatch}
            getLoading={getLoading}
            // data={data}
          />
        )}
      </div>
    );
  }
}

export default connect(({ log, appListMenu, loading }) => ({
  query: log.query,
  tenantList: appListMenu.tenantList,
  loading,
}))(LogManagemetList);
